<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">Wayne</div>
<br>
<div class="cls">刘自成</div>
<br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    /*
    获取：使用Document对象的方法来获取
        * getElementById() ：根据id属性值获取，返回单个Element对象
        * getElementsByTagName() ：根据标签名称获取，返回Element对象数组
        * getElementsByName() ：根据name属性值获取，返回Element对象数组
        * getElementsByClassName() ：根据class属性值获取，返回Element对象数组
    */

    //1.getElementById() ：根据id属性值获取，返回单个Element对象
    var img = document.getElementById("light");
    // alert(img);

    //2.getElementsByTagName() ：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    // alert(divs.length);
    /* for (let i = 0; i < divs.length; i++) {
         alert(divs[i]);
     }*/

    //3.getElementsByName() ：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    /*for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);
    }*/

    //4.getElementsByClassName() ：根据class属性值获取，返回Element对象数组
    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);
    }


</script>

</body>
</html>